<template>
    <div class="studentStatistics">
        <div class="echartsBox">
            <div class="titleBox">
                <div class="fk"></div>
                <div>星星</div>
            </div>
            <div class="main" id="main">

            </div>
        </div>

        <div class="detailData">
            <div>共练习 <span style="color: #4BA840;">22003</span> 次, 平均<span style="color: #4BA840;">1572</span>次/月, 其中2024年7月练习<span style="color: #4BA840;">1109</span>次</div>
            <div> 共答对<span style="color: #4BA840;">15864</span>题, 平均<span style="color: #4BA840;">1133</span>题/月, 其中2024年7月答对<span style="color: #4BA840;">762</span>题</div>
            <div>共练习<span style="color: #4BA840;">319</span>天, 平均每天练习<span style="color: #4BA840;">7.1</span>分钟, 其中2024年7月平均用时<span style="color: #4BA840;">6.0</span>分钟</div>
            <div>共完成<span style="color: #4BA840;">0</span>道拍照练习, 平均<span style="color: #4BA840;">0</span>道/月, 其中2024年7月完成<span style="color: #4BA840;">0</span>道</div>
            <div>2023年08月31日起, 累计磨耳朵<span style="color: #4BA840;">99</span> 分钟, 平均每天磨耳朵<span style="color: #4BA840;">0.3</span>分钟</div>
        </div>

    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.handleBar()
    },
    methods: {
        handleBar() {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'axis', // 坐标轴触发
                    axisPointer: { // 坐标轴指示器配置项
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],

                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
                        type: 'bar',
                        itemStyle: {
                            color: '#3FB9E2', //柱状图的颜色
                            emphasis: { label: { show: true, position: 'top' } },
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        },
    }
}
</script>

<style scoped lang="scss">
.studentStatistics {
    width: 100%;
    height: 583px;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    margin-top: 16px;
    padding: 16px;
    box-sizing: border-box;

    .echartsBox {
        width: 100%;

        .titleBox {
            display: flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #333333;
            line-height: 16px;
            cursor: pointer;

            .fk {
                width: 23px;
                height: 13px;
                background: #3FB9E2;
                border-radius: 4px 4px 4px 4px;
                margin-right: 4px;
            }
        }

        .main {
            width: 70%;
            height: 382px;
        }
    }

    .detailData {
        font-family: PingFang SC, PingFang SC;
        font-weight: 550;
        font-size: 14px;
        color: #333333;
        line-height: 28px;
        margin-left: 85px;
    }

}
</style>